@import "lib/assets/stylesheets/variable.scss";

.yui-tabs {
  width: 100%;
  &-nav-wrap {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid $B300;
    .yui-tabs-item-wrap {
      .yui-tabs-item {
        display: inline-flex;
        height: 36px;
        line-height: 36px;
        padding: 0 12px;
        font-size: $font-size-default;
        color: $font-low-color;
        cursor: pointer;
        .yui-tabs-icon {
          position: relative;
          top: 3px;
          margin-right: 4px;
        }

        &.yui-tabs-active {
          color: $H700;
        }

        &.yui-tabs-disabled {
          background: #f7f7fa;
          color: #c5c6c7;
          border-radius: 6px;
          user-select: none;
          cursor: not-allowed;
        }
      }
    }
    .yui-tabs-extra {
      margin-bottom: 4px;
    }
  }

  &-indicator {
    transition: all 300ms;
    border-bottom: 2px solid $H700;
  }
  .yui-tabpane {
    padding: 12px;
  }
}
